<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"></el-input>
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-input.is-disabled .el-input__inner {
            background-color: #fff;
            color: #606266;;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{(action == 'Add'?'添加':type =='0'?'修改':'查看')}}检测报告管理</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form"
                    :data-options="JSON.stringify({'tableName':'detection','formName':'dataForm' ,'primaryKey':'Detection_SerialNumber'})">
                    <!-- 子表 -->
                    <div
                        :data-options="JSON.stringify({'tableName':'detection_results','formName':'childDataForm' ,'parentTableName':'detection'})">
                    </div>
                    <div
                        :data-options="JSON.stringify({'tableName':'detection_attachment','formName':'childDataForm1' ,'parentTableName':'detection'})">
                    </div>
                </div>
                <div class="table_titel">
                    <div class="titel">检测报告详情</div>
                </div>
                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">溯源批次号</div>
                            </template>
                            <el-form-item prop="Traceability_Batch_SerialNumber"
                                :rules="[{ required: true, message: '请选择溯源批次号', trigger: 'change' }]">
                                <el-select :disabled="type=='1'" v-model.trim="dataForm.Traceability_Batch_SerialNumber"
                                    placeholder="请选择溯源批次号" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in traceability_batch" :key="index"
                                        :label="item.Traceability_Batch_SerialNumber"
                                        :value="item.Traceability_Batch_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">企业名称</div>
                            </template>
                            <el-form-item prop="Enterprise_Info_SerialNumber"
                                :rules="[{ required: true, message: '请输入企业名称', trigger: 'blur' }]">
                                <el-input :disabled="type=='1'" v-model.trim="dataForm.Enterprise_Info_SerialNumber"
                                    placeholder="请输入企业名称"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">检测日期</div>
                            </template>
                            <el-form-item prop="Detection_Date"
                                :rules="[{ required: true, message: '请输入检测日期', trigger: 'change' }]">
                                    <el-date-picker @change="handleDate($event,item)" v-model.trim="dataForm.Detection_Date"
                                    format="yyyy-MM-dd" style="width: 100%;" value-format="yyyy-MM-dd" type="date"
                                    placeholder="可选择检测日期" size="large"></el-date-picker>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">检测机构</div>
                            </template>
                            <el-form-item prop="Testing_Agency"
                                :rules="[{ required: true, message: '请输入检测机构', trigger: 'blur' }]">
                                <el-input :disabled="type=='1'" v-model.trim="dataForm.Testing_Agency"
                                    placeholder="请输入检测机构"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <div class="table_titel">
                    <div class="titel">检测结果</div>
                    <div class="operation" v-if="type=='0'"><!-- -->
                        <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
                        <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
                    </div>
                </div>
                <el-form v-if="type=='0'" :model="{childDataForm:childDataForm.filter(i=>i.Row_Status != '1')}"
                    ref="childForm" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border
                        v-for="(item,index) in childDataForm.filter(i=>i.Row_Status != '1')" :key="index">
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">项目名称</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Project_Name`"
                                :rules="[{ required: true, message: '请输入项目名称', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Project_Name" placeholder="请输入项目名称"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">单位</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Unit`"
                                :rules="[{ required: true, message: '请输入单位', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Unit" placeholder="请输入单位"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">标准值</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Standard_Value`"
                                :rules="[{ required: true, message: '请输入标准值', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Standard_Value" placeholder="请输入标准值"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">实测值</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Measured_Value`"
                                :rules="[{ required: true, message: '请输入实测值', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Measured_Value" placeholder="请输入实测值"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">备注</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Remarks`"
                                :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Remarks" placeholder="请输入备注"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <el-table v-else :data="childDataForm.filter(i=>i.Row_Status != '1')" style="width: 100%">
                    <el-table-column prop="Project_Name" label="项目名称" min-width="120"></el-table-column>
                    <el-table-column prop="Unit" label="单位" min-width="120"></el-table-column>
                    <el-table-column prop="Standard_Value" label="标准值" min-width="120"></el-table-column>
                    <el-table-column prop="Measured_Value" label="实测值" min-width="120"></el-table-column>
                    <el-table-column prop="Remarks" label="备注" min-width="120"></el-table-column>
                </el-table>
                <div class="table_titel">
                    <div class="titel">报告附件报告</div>
                    <div class="operation">
                        <el-button type="primary" size="small" @click="handleAdd('childDataForm1')">新增</el-button>
                        <el-button type="danger" size="small" @click="handleRemove('childDataForm1')">删除</el-button>
                    </div>
                </div>
                <el-form :model="{childDataForm1:childDataForm.filter(i=>i.Row_Status != '1')}" ref="childForm"
                    :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border
                        v-for="(item,index) in childDataForm1.filter(i=>i.Row_Status != '1')" :key="index">

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">上传附件</div>
                            </template>
                            <el-form-item :prop="`childDataForm1.${index}.Attachment_URL`"
                                :rules="[{ required: true, message: '请选择附件', trigger: 'blur' }]">
                            </el-form-item>                            
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button size="medium" v-if="type=='0'" type="primary" plain @click="handleSubmit"
                    :loading="loading">提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>